<template>
	<view class="xsfhd_content">
		<!-- 头部 -->
		<view class="xsfhd_header">

			<salesHeader @getKh="getKh" :khInfo="khInfo">
				<template v-slot:center>
                    <view style="display: flex; align-items: center; " >
						<view>欠款: {{ headerInfo.qkje || 0 }}</view>
						<!-- <view style="margin-left: 30rpx;">本单金额: {{ headerInfo.qkje || 0 }}</view> -->
					</view>
                </template>
                <template v-slot:right_btn>
                    <view class="header_top_right">
                        <button @click="goPages" :plain="true" class="add_btn" hover-class="hover_btn">
                            <text class="iconfont icon-jia1"></text> 
                            <view>选择订单</view>
                        </button>
                    </view>
                </template>
            </salesHeader>

            <view class="xsfhd_header_top">
				<uni-row class="form_row">
					<uni-col class="form_item" :span="18">
							<view class="label">托运地址：</view>
							<input style="flex: 1;" type="text" v-model="formData.shaddr" placeholder="请输入托运地址" />
					</uni-col>
					<uni-col class="form_item" :span="6">
						<view class="header_top_right">
							<button @click="submitForm" :disabled="subDisabled" class="add_btn" hover-class="hover_btn">
								<view>提交</view>
							</button>
						</view>
					</uni-col>
				</uni-row>

				<uni-row class="form_row">
                    <uni-col class="form_item" :span="8">
						<view class="label">本次收款：</view>
						<input type="number" v-model="formData.amount" placeholder="请输入本次收款" />
                    </uni-col>
                    <uni-col class="form_item" :span="8">
						<view class="label">优惠金额：</view>
						<input type="number" v-model="formData.discount" placeholder="请输入优惠金额" />
                    </uni-col>
                    <uni-col class="form_item" :span="8">
						<view class="label">收款方式：</view>
						<uni-data-select
							class="form_input"
							v-model="formData.lkfs"
							:localdata="skfsList"
							placeholder="请选择收款方式"
						></uni-data-select>
                    </uni-col>
                </uni-row>

				<uni-row class="form_row">
                    <uni-col class="form_item" :span="8">
						<view class="label">仓库：</view>
						<uni-data-select
							v-model="formData.ck"
							placeholder="请选择仓库"
							:localdata="ckList"
							></uni-data-select>
                    </uni-col>
                    <uni-col class="form_item" :span="8">
						<view class="label">单据日期：</view>
						<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.zhdate" />
                    </uni-col>
                    <uni-col class="form_item" :span="8">
						<view class="label">备注：</view>
						<input type="text" v-model="formData.remark" placeholder="请输入备注" />
                    </uni-col>
                </uni-row>


				<uni-row class="form_row">
					<uni-col class="form_item" :span="8">
						<view class="label">业务员：</view>
						<input type="text" v-model="formData.ywy" placeholder="请输入业务员" />
					</uni-col>

					<uni-col class="form_item" :span="8">
						<view class="label">制单人：</view>
						<input type="text" disabled v-model="formData.zhuser" />
					</uni-col>
					<uni-col class="form_item" :span="8">
						<view class="label">附件：</view>
						<button v-if="!formData.attach" @click="updateImg">添加图片</button>
						<view v-if="formData.attach" class="img_box">
							<image style="width: 100%; height: 100%;" :src="formData.attach" />
							<text @click="formData.attach = ''" class="iconfont icon-jian1"></text>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>

		<!--  -->
		<view class="xsfhd_list">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onScrolltolower">
				<view v-if="fhType == 0" class="billing_item" v-for="(item, index) in list" :key="index">
					<view class="billing_info" >
						<view class="billing_img">
							<image style="height: 100%; width: 100%;"  :src="item.main.image"/>
						</view>

						<view class="info_center">
							<view class="info_center_row">
								<view style="width: 33%;">货号: {{ item.main.bbreed || '' }}</view>
								<view style="width: 33%;">品名: {{ item.main.description || '' }}</view>
								<view style="width: 34%;">订单号: {{ item.main.dh || '' }}</view>
							</view>

							<view class="info_center_row">
								<view style="width: 33%;">数量: {{ item.main.xdsl || 0 }}</view>
								<view style="width: 33%;">已发货: {{ item.main.yfhsl || 0 }}</view>
								<view style="width: 34%;">未发货：{{ item.main.wfhsl || 0 }}</view>
							</view>
							<view class="info_center_row">
								<view style="width: 100%;" class="info_item">备注: {{ item.main.remark || '' }}</view>
							</view>
						</view>

						<view @click="item.showTable = !item.showTable" style="display: flex; align-items: flex-end;">
							{{ !item.showTable ? '查看详情 >>' : '收起 >>' }}
						</view>
					</view>

					<view v-if="item.showTable" style="padding-top: 20rpx;">
						<view>
							<uni-table border stripe emptyText="暂无更多数据"  >
								<uni-tr>
									<uni-th  width="110" align="center">颜色/尺码</uni-th>
									<uni-th align="center" v-for="(j, i) in item.colorTable[0].chima" :key="i">
										{{ i }}
									</uni-th>
								</uni-tr>
								<uni-tr v-for="(x, y) in item.colorTable" :key="y">
									<uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
									<uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
										{{ w }}
									</uni-td>
								</uni-tr>

							</uni-table>
						</view>
					</view>
				</view>


				<!--  -->

				<view v-if="fhType == 1"  class="zdfh_list" v-for="(item, index) in list" :key="index">
					<view class="zdfh_header" >
						<!-- <checkbox-group>
							<label style="display: flex; align-items: center;" >
								<checkbox value="cb" checked="true" />
							</label>
						</checkbox-group> -->
						<view style="margin: 10rpx 20rpx;">单号：{{ item.dhinfo.dh }}</view>
						<view>日期：{{ item.dhinfo.zhdate }}</view>
					</view>

					<view style="padding-left: 20rpx;">
						<!--  -->
						<view class="billing_item" v-for="(i, j) in item.dataList" :key="j">
							<view class="billing_info">
								<view class="billing_img">
									<view style="width: 100rpx; height: 100rpx;">
										<image style="height: 100%; width: 100%; border-radius: 10rpx;" :src="i.main.image" />
									</view>
								</view>

								<view class="info_center">
									<view class="info_center_row">
										<view style="width: 33%;">货号: {{ i.main.bbreed || '' }}</view>
										<view style="width: 33%;">品名: {{ i.main.description || '' }}</view>
										<view style="width: 34%;">订单号: {{ i.main.dh || '' }}</view>
									</view>

									<view class="info_center_row">
										<view style="width: 33%;">数量: {{ i.main.xdsl || 0 }}</view>
										<view style="width: 33%;">已发货: {{ i.main.yfhsl || 0 }}</view>
										<view style="width: 34%;">未发货：{{ i.main.wfhsl || 0 }}</view>
									</view>
									<view class="info_center_row">
										<view style="width: 100%;" class="info_item">备注: {{ i.main.remark || '' }}</view>
									</view>
								</view>

								<view  @click="i.showTable = !i.showTable" style="display: flex; align-items: flex-end;">
									{{ !i.showTable ? '查看详情 >>' : '收起 >>' }}
								</view>
							</view>

							<view v-if="i.showTable" style="padding-top: 20rpx;">
								<view>
									<uni-table border stripe emptyText="暂无更多数据"  >
										<uni-tr>
											<uni-th  width="110" align="center">颜色/尺码</uni-th>
											<uni-th align="center" v-for="(j, i) in i.colorTable[0].chima" :key="i">
												{{ i }}
											</uni-th>
										</uni-tr>
										<uni-tr v-for="(x, y) in i.colorTable" :key="y">
											<uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
											<uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
												{{ w }}
											</uni-td>
										</uni-tr>

									</uni-table>
								</view>
							</view>
						</view>
						<!--  -->
					</view>


				</view>

			</scroll-view>
		</view>
		<!--  -->
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import salesHeader from "@/components/sales-header/sales-header.vue";
import GetDate from "@/utils/date.js";
import Http from '@/service/api'
import utils from "@/utils/utils.js";
	export default {
		components: {
			customHeader,
			salesHeader,
		},
		data() {
			return {
				dk: uni.getStorageSync('baseUrl'),
				filtrList: [
                    { value: 0, text: "默认排序" },
                    { value: 1, text: "订量多到少" },
                    { value: 2, text: "订量少到多" },
                    { value: 3, text: "价格高到低" },
                    { value: 4, text: "价格低到高" },
                ],
			
				formData: {
					attach: ''
				},
				headerInfo: {}, // 头部信息
				skfsList: [], // 收款方式
				ckList: [], // 仓库列表
				fhType: -1, // 发货类型
				list: [],
				subDisabled: false,
				khInfo: {}
			}
		},
        computed: {},
		onLoad(r) {
			console.log('== onLoad ', r)
			if (r.hasOwnProperty('fhType')) { 
				this.fhType = r.fhType
				let list = JSON.parse(r.list)
				this.list = list
			}
			if (r.hasOwnProperty('khInfo')) { 
				let khInfo = JSON.parse(r.khInfo)
				this.khInfo = khInfo
				this.headerInfo = {
					...khInfo,
				}
				this.formData = {
					...this.formData,
					...khInfo,
					shaddr: khInfo.shaddr
				}
			}

			// this.list = utils.getTableData()

			// console.log('== 旧 ', this.list)

			this.formData.zhdate = GetDate.getToday().time;
			this.formData.zhuser = uni.getStorageSync('loginUserName');
			this.GetBaseInfoList()
		},
		methods: {
			handleTable(item) {
				let arr = JSON.parse(JSON.stringify(this.list))
				this.list = arr.map((i , m)=> ({
					...i,
					dataList: i.dataList.map((j , n)=> {
						return {
							...j,
							showTable: j.uuid == item.uuid ? !j.showTable : j.showTable
						}
					})
				}))
			},
			submitForm() {
				if (!this.list.length) {
					uni.showToast({
						title: '请添加订单',
						icon: 'none'
					});
					return
				}

				if (!this.headerInfo.bh) {
					uni.showToast({
						title: '请选择客户',
						icon: 'none'
					});
					return
				}

				if (!this.formData.ck) {
					uni.showToast({
						title: '请选择仓库',
						icon: 'none'
					});
					return
				}

				let param = {
					...this.headerInfo,
					...this.formData,
					zhuser: uni.getStorageSync('loginUserName'),
					khid: this.headerInfo.bh,
				}

				if (this.fhType == 0) {
					param.fpfhList = this.list
				} else {
					param.zcfhList = this.list
				}

				console.log(	'== 提交 ', param)

				this.subDisabled = true

				// zhuser: uni.getStorageSync('loginUserName'),
				Http.salesFhSave(JSON.stringify(param)).then(r => {
					console.log('== r ', r)
					let ModulePrimaryKey = r

					uni.showToast({
                        title:'保存成功',
                        icon:'none',
                        duration:2000
                    })

					if (!this.formData.attach) {
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 2000)
                        return
                    }

					uni.uploadFile({
                        url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                        filePath: this.formData.attach, 
                        name: 'img',
                        formData: {
                            Module: '销售发货单附件上传',
                            ModulePrimaryKey,
                            sort: 0,
                            IsMain: 1,
                            customId: uni.getStorageSync('customId'),
                        },
                        header: {
                            "Content-Type": "multipart/form-data",
                            "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                        },
                        success: (r) => {
                            console.log('== img r ', r)
                            if (r.statusCode == 200) {
                                let data = JSON.parse(r.data)
                                console.log('== data ---- ', data)
                                    uni.showToast({
                                        title:'保存成功',
                                        icon:'none',
                                        duration:3000
                                    })
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }, 2000)
                            }
                            
                        },
                        fail: (err) => {
                            console.log('== img err ', err)
                            this.subDisabled = false
                            uni.showToast({
                                title:'图片上传失败',
                                icon:'none',
                                duration:3000
                            })
                        }
                    })

				}).catch(err => {
					this.subDisabled = false
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			},
			onScrolltolower() {
				console.log('== 触底')
			},
			// 获取的客户信息
			getKh(item) {
                console.log('== item ', item)
				this.headerInfo = item
				this.formData = {
					...this.formData,
					...item,
					shaddr: item.shaddr
				}
            },
			goPages() {
				let param = {
					...this.formData,
					...this.headerInfo
				}
				console.log('== 选择订单 param ', param)
				if (!param.bh) {
					uni.showToast({
						title:'请先选择客户',
						icon:'none',
						duration: 2000
					})
					return
				}
				uni.redirectTo({
					url: `./xzdd?fhType=${this.fhType}&khInfo=${JSON.stringify(param)}`
				})
            },
			updateImg() {
                uni.chooseImage({
                    count: 1, // 最多选择1张图片
                    success: (res) => {
                        console.log('== res ', res )
                        console.log('== tempFilePaths ', res.tempFilePaths )
                        this.formData.attach = res.tempFilePaths[0]

                        console.log('== attach -- ', this.formData.attach)


						return
                        uni.uploadFile({
                            url: `https://${this.dk}/BaseInfo/SysHuohao/UploadAdd.aspx`,
                            filePath: this.formData.attach, //从调用页面传入 --path: imgbox, 选取图片的地址数组  
                            name: 'img',
                            formData: {
                              Module: '销售发货单附件上传',
                              ModulePrimaryKey: 'FH250100003',
                              sort: 0,
                              IsMain: 1,
                              customId: uni.getStorageSync('customId'),
                            },
                            header: {
                                "Content-Type": "multipart/form-data",
                                "Authorization": 'Bearer ' + uni.getStorageSync('token'),
                            },
                            success: (r) => {
                                if (r.statusCode == 200) {
                                    let data = JSON.parse(r.data)
                                    console.log('== data ---- ', data)
                                    if (data.code == 1) {
                                        this.formData.attach = ''
                                        uni.showToast({
                                            title:'图片上传成功',
                                            icon:'none',
                                            duration:3000
                                        })
                                    }
                                }
                            },
                            fail: (err) => {
                                console.log('== attach err ', err)
                                uni.showToast({
                                    title:'图片上传失败',
                                    icon:'none',
                                    duration:3000
                                })
                            }
                        })
                    },
                });
            },
			// 获取基础数据
			GetBaseInfoList() {
                let param = { param: 'tyfs,skfs,ck' }
                Http.GetBaseInfoList(param).then(r => {
                   console.log('== 11 基础数据 ', r)
                //    this.tyfsList = r.tyfs.map(i => ({...i, value: i.bh, text: i.name}))
                   this.skfsList = r.skfs.map(i => ({...i, value: i.bh, text: i.name}))
                   this.ckList = r.ck.map(i => ({...i, value: i.bh, text: i.name}))
                   
                }).catch(err => {
                    console.log('== err ', err)
                })
            },
			
		}
	}
</script>

<style lang="less" scoped>
.xsfhd_content {
    height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 16rpx;

	.xsfhd_header {
		width: 100%;
		padding: 15rpx 10rpx 0rpx;
		box-sizing: border-box;

		.header_top_right {
            .add_btn {
                display: flex;
                align-items: center;
                height: 40rpx;
                width: 120rpx;
				color: #ffc98c;
				border: 1rpx solid #ffc98c;
            }

            .iconfont {
                font-size: 20rpx;
                margin-right: 5rpx
            }
        }
		.header_top_right .hover_btn {
			background: #f0efef;
		}
		
		.xsfhd_header_top {
			// display: flex;
			// align-items: center;
			// border-bottom: 2rpx dashed #cbcbcb;
			padding-top: 10rpx;

			.form_row {
				width: 100%;
				display: flex;
				align-items: center;


				.form_item {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;
					.label {
						white-space: nowrap;
					}

					.img_box {
						position: relative;
						width: 100%;
						height: 80rpx;

						.iconfont {
							position: absolute;
							top: 0;
							left: 0;
							color: red;
							font-size: 30rpx;
						}
					}

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						height: 40rpx;
						background: #f9a94d;
						color: #fff;
						margin: 0;
						margin-left: 10rpx;
					}
					
					.hover_btn {
						background: #da9444;
					}
				}
				
			}
		}

		.work_left {
			flex: 1;
			display: flex;
			align-items: center;

			.work_item {
				margin-right: 20rpx;
			}
		}

		
	}

	.xsfhd_list {
		flex: 1;
		overflow: auto;
		background: #f5f5f5;
		padding-top: 10rpx;
		padding-left: 5rpx;

		.billing_item {
            margin-bottom: 20rpx;
            background: #fff;
            padding: 10rpx;

            .billing_info {
                display: flex;


                .billing_img {
                    height: 90rpx;
                    width: 90rpx;
					margin-right: 10rpx;
                }

                .info_center {
                    flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

                    .info_center_row {
                        display: flex;
                        align-items: center;

                    }
                }
            }

        }

		
	}


	.zdfh_list {
		margin-bottom: 20rpx;
		background: #fff;
		padding: 10rpx;

		.zdfh_header {
			display: flex;
			align-items: center;
		}


		.billing_item {
			margin-bottom: 20rpx;
			background: #fff;
			padding: 10rpx;

			.billing_info {
				display: flex;


				.billing_img {
					height: 90rpx;
					width: 120rpx;
					margin-right: 10rpx;
				}

				.info_center {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					overflow: hidden;

					.info_center_row {
						display: flex;
						align-items: center;

						.info_item {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2; /* 显示三行 */
							overflow: hidden;
							text-overflow: ellipsis;
						}

					}
				}
			}
		}
	}
}
</style>
